<template>
    <div class="wrapper">
        <h1>PropsFu</h1>
        <h4>car：{{ car }}</h4>
        <h4 v-show="toy">toy：{{ toy }}</h4>

        <!-- 第一种 :setToy 回调方法 -->
        <PropsZi1 car="car" :setToy="setToy"></PropsZi1>
        <!-- 第二种 @my-event 自定义事件 -->
        <PropsZi2 car="car" @my-event="myEventCb"></PropsZi2>

        <hr />

        {{ username }}
        <!-- v-model 用在原生HTML标签上 -->
        <!-- <input v-model="username" /> -->
        <!-- v-model 原生实现原理 -->
        <!-- <input :value="username" @input="username = (<HTMLInputElement>$event.target).value" /> -->
        <!-- v-model 用在自定义组件标签上 -->
        <!-- <PropsZi3Input v-model="username" /> -->
        <!-- vue3约定自定义组件使用v-model时，组定义组件内部需要实现modelValue的赋值，和update:modelValue的defineEmits --> <!-- vue2使用 :value @input -->
        <!-- <PropsZi3Input :modelValue="username" @update:modelValue="username = $event" /> -->
        <!-- 自定义modelValue别名 -->
        <PropsZi3Input v-model:alias="username" />

        <hr />

        <h4>我有 a:{{ a }}, c:{{ b }}, c:{{ c }}, d:{{ d }}</h4>
        <!-- 分别定义attr -->
        <!-- <PropsZi4Attrs :a="a" :b="b" :c="c" :d="d"></PropsZi4Attrs> -->
        <!-- 简便定义attr -->
        <PropsZi4Attrs v-bind="{ a, b, c, d, updateA }"></PropsZi4Attrs>

        <hr />

        <h4>房产: {{ house }}</h4>
        <button @click="stopToy">禁止玩玩具</button>
        <button @click="addComputer">买新电脑</button>
        <button @click="addBook($refs)">一起看书</button><!-- $refs 关键字获取所有ref实例 -->
        <PropsZi5Refs ref="c1"></PropsZi5Refs>
        <PropsZi6Parent ref="c2"></PropsZi6Parent>

        <hr />
        <h4>银子：{{ money }} 万元</h4>
        <h4>车子：一辆{{ carObj.brand }}车，价值{{ carObj.price }}万元</h4>
        <PropsZi7Provide></PropsZi7Provide>
    </div>
</template>

<script lang="ts" setup name="PropsFu">

import { ref, reactive, provide } from 'vue'
import PropsZi1 from './PropsZi1.vue'
import PropsZi2 from './PropsZi2.vue'
import PropsZi3Input from './PropsZi3Input.vue'
import PropsZi4Attrs from './PropsZi4Attrs.vue'
import PropsZi5Refs from './PropsZi5Refs.vue'
import PropsZi6Parent from './PropsZi6Parent.vue'
import PropsZi7Provide from './PropsZi7Provide.vue'

let car = ref('奔驰')
let toy = ref()
let username = ref('张三')
let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)
let house = ref(10)
let c1 = ref()
let c2 = ref()
let money = ref(100)
let carObj = reactive({
    brand: '宝马',
    price: 30,
})

function setToy(value: string) {
    toy.value = value
}

function myEventCb(value: string) {
    toy.value = value
}

function updateA(value: number) {
    a.value += value
}

function stopToy() {
    c1.value.toy = '不许玩了'
}

function addComputer() {
    c2.value.computer += '+'
}

function addBook(refs: any) {
    for (let key in refs) {
        // 响应式对象，无需.value
        refs[key].book += 10
    }
}

function updateMoney(value: number) {
    money.value += value
}

defineExpose({ house })

provide('moneyContext', { money, updateMoney })
provide('carObj', carObj)
</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>